<template>
	<el-container>
		<el-main class="nopadding">
			<fc-designer ref="designer" :config="designerConfig" />
		</el-main>
	</el-container>

	<!--
		<h2>JSON Schema 可视化</h2>
		<ta-json-schema-tree :schema="jsonSchema" :expand-all="true" @node-click="handleNodeClick" />
		</div>
-->
</template>

<script>
	// import taJsonSchemaTree from '@/taui/ta-json-schema-tree/index.vue';
	export default {
		components: {

		},
		mounted() {

			const titleDragRule = {
				menu: 'shop', // aide
				icon: 'icon-title',
				label: '自定义组件',
				//唯一 ID
				name: 'title',
				//组件可以配置的事件
				inline: false,
				style: false,
				dragBtn: false,
				rule() {
					//组件的渲染规则
					return {
						//组件的名称, 与上一步是对应
						type: 'FcTitle',
						props: {
							title: '自定义标题',
						},
					};
				},
				props() {
					//组件右侧的配置项,与组件中的 props 对应
					return [{
							type: 'input',
							field: 'title',
							title: '标题'
						},
						{
							type: 'select',
							field: 'size',
							title: '尺寸',
							//默认值
							value: 'H2',
							options: [1, 2, 3, 4, 5, 6].map(k => {
								return {
									label: 'H' + k,
									value: 'h' + k
								};
							})
						}, {
							type: 'select',
							field: 'align',
							title: '位置',
							options: [{
									label: '左侧',
									value: 'left'
								},
								{
									label: '居中',
									value: 'center'
								},
								{
									label: '右侧',
									value: 'right'
								}
							]
						}
					];
				}
			};

			//挂载拖拽规则

			this.$refs.designer.addMenu({
				name: 'shop',
				title: '商城组件',
				list: []
			});

			const lastElement = this.$refs.designer.menuList.pop();
			this.$refs.designer.menuList.unshift(lastElement);

			this.$refs.designer.addComponent(titleDragRule);

		},
		data() {
			// https://view.form-create.com/hidden-item
			return {
				designerConfig: {
					formOptions: {
						form: {
							labelPosition: "top"
						}
					},
					hiddenItem: ['password'],
					hiddenMenu: [''],
					fieldReadonly: false,
					showBaseForm: true,
					showEventForm: false,
					showStyleForm: false,
					showConfig: true,
					showLanguage: false
				}
			};
		},

		methods: {
			handleNodeClick(data) {
				console.log('Clicked node:', data);
			}
		}
	}
</script>

<style scoped>
	:deep(._fc-m-drag.pc) {
		width: 400px;
	}

	:deep(._fc-m-tools-l .devices) {
		display: none;
	}

	:deep(._fc-m-tools-l .line) {
		display: none;
	}

	:deep(.icon-title) {
		width: 21px;
		height: 21px;
		background-image: url('https://fe-1304214004.cos.ap-beijing.myqcloud.com/images/ssp/ab181a88-ffc3-41e0-885a-5ab5b931540d.png');
		background-size: 21px 21px;
		background-repeat: no-repeat;
	}
</style>
